<template>
  <div class="container">
    <q-form
        ref="form"
        class="form-card"
        :model="formModel"
        :rules="rules"
    >
      <q-form-item label="账号" prop="username">
        <q-input v-model="formModel.username" type="text"/>
      </q-form-item>

      <q-form-item label="密码" prop="password">
        <q-input v-model="formModel.password" type="text"/>
      </q-form-item>

      <div class="button-group">
        <q-button @click="handleSubmitClick">提交</q-button>
        <q-button @click="handleResetClick" theme="secondary">重置</q-button>
      </div>
    </q-form>
  </div>
</template>

<script>
import {QButton, QForm, QFormItem, QInput} from "@qvant/qui-max";
import {reactive, ref} from "vue";

const model = {
  username: '',
  password: ''
};

const ruleModel = {
  username: [
    {required: true},
    {min: 3, max: 10, message: '长度应该在 3-10 之间', trigger: 'blur'}
  ],
  password: {
    required: true,
    message: 'Please input password',
    trigger: 'change'
  }
};

export default {
  name: "DemoForm",
  components: {QForm, QFormItem, QInput, QButton},
  setup() {
    const form = ref(null);
    const rules = reactive(ruleModel)
    const formModel = reactive(model);

    const handleSubmitClick = async () => {
      const valid = await form?.value?.validate();
      if (valid) {
        const {isValid, invalidFields} = valid;

        console.log('QForm | validate', isValid, invalidFields);
        if (isValid) {

          console.log(formModel)
        }
      }
    };

    const handleResetClick = () => {
      form?.value?.resetFields();
    };

    return {
      form,
      rules,
      formModel,
      handleSubmitClick,
      handleResetClick,
    };
  }
}
</script>

<style lang="scss" scoped>
@use "@/styles/base.scss" as base;

.container {
  box-shadow: 0 0 0 #E3FDF5;
  border-radius: 20px;
  border: 1px solid #ccc;

  @include base.layout-center(
      $h: 350px,
      $w: 380px,
  );

  .form-card {
    width: 280px;

    .button-group {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
  }
}
</style>